<template>
    <div>
        <a-page-header
                style="border: 1px solid rgb(235, 237, 240)"
                title="LEAVE"
                sub-title="请假单申请"
        />
        <a-form
                style="margin: 30px 200px"
                :layout="'vertical'"
                :model="leaveBill"
                name="basic"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 24}"
                autocomplete="off">

            <a-form-item
                    v-bind="validateInfos.title"
                    label="标题"
                    name="title">
                <a-input v-model:value="leaveBill.title"/>
            </a-form-item>
            <a-form-item
                    v-bind="validateInfos.day"
                    label="请假天数"
                    name="day">
                <a-input v-model:value="leaveBill.day"/>
            </a-form-item>
            <a-form-item
                    v-bind="validateInfos.remark"
                    label="原因描述"
                    name="remark">
                <a-textarea :auto-size="{minRows:3}" v-model:value="leaveBill.remark"/>
            </a-form-item>
            <a-form-item
                    v-bind="validateInfos.personnelman"
                    label="请选择审批的人事专员"
                    name="personnelman">
                <a-select
                        ref="select"
                        v-model:value="leaveBill.personnelman"
                        placeholder="请选择"
                        style="width: 120px"
                        :options="personnelmanList"
                        :field-names="{label:'username',value:'id'}"
                ></a-select>
            </a-form-item>
            <a-form-item
                    v-bind="validateInfos.manger"
                    label="请选择审批的经理"
                    name="manger">
                <a-select
                        ref="select"
                        v-model:value="leaveBill.manger"
                        placeholder="请选择"
                        style="width: 120px"
                        :options="mangerList"
                        :field-names="{label:'username',value:'id'}"
                ></a-select>
            </a-form-item>
            <a-form-item>
                <a-space>
                    <a-button type="primary" @click="submitOk">
                        提交申请
                    </a-button>
                    <a-button type="default" @click="resetFields">
                        重置
                    </a-button>
                </a-space>

            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message,Form} from 'ant-design-vue'
    import {SessionStorage} from '../../../public/session-storage.js'
    import {useRouter} from 'vue-router'

    export default {
        name: "sales-leaveApply",
        setup() {
            const leaveBill = ref({
                title: '',
                day: '',
                remark: '',
                personnelman: undefined,
                manger: undefined,
            })
            const userList = ref([])
            const personnelmanList = ref([])
            const mangerList = ref([])
            const loginUser = ref({})
            const router = useRouter()
            const useForm = Form.useForm
            const {validate, validateInfos, resetFields} = useForm(leaveBill, {
                title: [{required: true, message: '标题不能为空', trigger: ['submit','change']}],
                day: [{required: true, message: '天数不能为空', trigger: ['submit','change']}],
                remark: [{required: true, message: '请假原因不能为空', trigger: ['submit','change']}],
                personnelman: [{required: true, message: '请选择审批的人事专员', trigger: ['submit','change']}],
                manger: [{required: true, message: '请选择审批的经理', trigger: ['submit','change']}],
            })

            const submitOk = () => {
                validate().then(()=>{
                    leaveBill.value.userId = loginUser.value.id
                    leaveBill.value.state = 0

                    axios.post('leaveProcess/startLeave',leaveBill.value).then(rs=>{
                        console.log("申请结果",rs)
                        if (rs.data.code == 200){
                            message.success("请假申请提交成功")
                            router.push('/sales/leaveBill')
                        }else {
                            message.error(rs.data.message)
                        }
                    })
                }).catch(()=>{
                    console.log("校验失败")
                })
            }

            onMounted(()=>{
                loginUser.value = SessionStorage.get('loginUser')
                axios.get('/user/queryAll').then(rs=>{
                    userList.value = rs.data.data
                    userList.value.forEach(val=>{
                        if (val.roleId == 4){
                            personnelmanList.value.push(val)
                        }
                        if (val.roleId == 1){
                            mangerList.value.push(val)
                        }
                    })
                })
            })
            return {
                leaveBill,
                submitOk,
                validateInfos,
                resetFields,
                personnelmanList,
                mangerList
            }
        }

    }
</script>

<style scoped>

</style>